<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String baseBath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>Title</title>
</head>
<body>
<base href="<%=baseBath%>">
<%@include file="common_cs.jsp"%>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
    <blockquote class="layui-elem-quote layui-bg-green">
        <div id="nowTime"></div>
    </blockquote>

    <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">
                新增客户
                <span class="layui-badge layui-bg-blue layuiadmin-badge">月</span>
            </div>
            <div class="layui-card-body layuiadmin-card-list">
                <p class="layuiadmin-big-font" id="thisMonthCustomerCount">0</p>
                <p>
                    总客户量
                    <span class="layuiadmin-span-color" id="customerCount"> <i class="layui-inline layui-icon layui-icon-flag"></i></span>
                </p>
            </div>
        </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">
                新增试驾
                <span class="layui-badge layui-bg-orange layuiadmin-badge">月</span>
            </div>
            <div class="layui-card-body layuiadmin-card-list">

                <p class="layuiadmin-big-font" id="thisMonthCusDriveCount">0</p>
                <p>
                    最近一个月
                    <span class="layuiadmin-span-color" id="cusDriveCount">15% <i class="layui-inline layui-icon layui-icon-user"></i></span>
                </p>
            </div>
        </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">
                新增订单
                <span class="layui-badge layui-bg-cyan layuiadmin-badge">月</span>
            </div>
            <div class="layui-card-body layuiadmin-card-list">
                <p class="layuiadmin-big-font" id="thisMonthCusOrderCount">0</p>
                <p>
                    总订单
                    <span class="layuiadmin-span-color" id="cusOrderCount">10% <i class="layui-inline layui-icon layui-icon-face-smile-b"></i></span>
                </p>
            </div>
        </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">
                收入
                <span class="layui-badge layui-bg-green layuiadmin-badge">月</span>
            </div>
            <div class="layui-card-body layuiadmin-card-list">

                <p class="layuiadmin-big-font" id="thisMonthCusOrderPrice">0</p>
                <p>总收入
                    <span class="layuiadmin-span-color" id="cusOrderPrice">*** <i class="layui-inline layui-icon layui-icon-dollar"></i></span>
                </p>
            </div>
        </div>
    </div>
    <div class="layui-col-sm12">
        <div class="layui-card">
            <div class="layui-card-header" style="height: 28px;line-height: 28px">
                访问量
            </div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-sm8">
<%--                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-pagetwo">--%>
<%--                            <div carousel-item id="LAY-index-pagetwo">--%>
<%--                                <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>--%>
<%--                            </div>--%>
<%--                        </div>--%>
                        <div id="dataview" class="layui-carousel layadmin-carousel layadmin-dataview"></div>
                    </div>
                    <div class="layui-col-sm4">
                        <div class="layuiadmin-card-list">
                            <p class="layuiadmin-normal-font">月新增客户</p>
                            <span>同上期增长</span>
                            <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="customerChainCompare">
                                <div class="layui-progress-bar" lay-percent="0" id="customerChainCompare"></div>
                            </div>
                        </div>
                        <div class="layuiadmin-card-list">
                            <p class="layuiadmin-normal-font">月新增试驾</p>
                            <span>同上期增长</span>
                            <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="cusDriveChainCompare">
                                <div class="layui-progress-bar" lay-percent="20%" id="cusDriveChainCompare"></div>
                            </div>
                        </div>
                        <div class="layuiadmin-card-list">
                            <p class="layuiadmin-normal-font">月收入</p>
                            <span>同上期增长</span>
                            <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="cusOrderChainCompare">
                                <div class="layui-progress-bar" lay-percent="25%" id="cusOrderChainCompare"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<%@include file="common_js.jsp"%>
<script>
    //获取系统时间
    var newDate = '';
    getLangDate();
    //值小于10时，在前面补0
    function dateFilter(date){
        if(date < 10){return "0"+date;}
        return date;
    }
    function getLangDate(){
        var dateObj = new Date(); //表示当前系统时间的Date对象
        var year = dateObj.getFullYear(); //当前系统时间的完整年份值
        var month = dateObj.getMonth()+1; //当前系统时间的月份值
        var date = dateObj.getDate(); //当前系统时间的月份中的日
        var day = dateObj.getDay(); //当前系统时间中的星期值
        var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        var week = weeks[day]; //根据星期值，从数组中获取对应的星期字符串
        var hour = dateObj.getHours(); //当前系统时间的小时值
        var minute = dateObj.getMinutes(); //当前系统时间的分钟值
        var second = dateObj.getSeconds(); //当前系统时间的秒钟值
        var timeValue = "" +((hour >= 12) ? (hour >= 18) ? "晚上" : "下午" : "上午" ); //当前时间属于上午、晚上还是下午
        newDate = dateFilter(year)+"年"+dateFilter(month)+"月"+dateFilter(date)+"日 "+" "+dateFilter(hour)+":"+dateFilter(minute)+":"+dateFilter(second);
        document.getElementById("nowTime").innerHTML = " 欢迎使用 小鹏 CRM管理系统。当前时间为： "+newDate+"　"+week;
        setTimeout("getLangDate()",1000);
    }





    layui.use(['index', 'sample','jquery','element','echarts'],function (){
        var element = layui.element;
        $ = layui.jquery;
        echarts = layui.echarts;
        $.post('customer/findCustomerCount',function (data){
            $("#thisMonthCustomerCount").text(data.month)
            $("#customerCount").text(data.all)
        })
        $.post('cusOrder/findCusOrderCount',function (data){
            $("#thisMonthCusOrderCount").text(data.month)
            $("#cusOrderCount").text(data.all)
        })
        $.post('cusOrder/findCusOrderPrice',function (data){
            $("#thisMonthCusOrderPrice").text(data.month)
            $("#cusOrderPrice").text(data.all)
        })
        $.post('cusDrive/findCusDriveCount',function (data){
            $("#thisMonthCusDriveCount").text(data.month)
            $("#cusDriveCount").text(data.all)
        })
        $.post('customer/findCustomerChainCompare',function (data){
            var res = parseFloat(Number(data).toFixed(2))*100+'%'
            $("#customerChainCompare").attr('lay-percent',res)
            element.init();
            element.progress('customerChainCompare', res);
        })

        $.post('cusDrive/findCusDriveChainCompare',function (data){
            var res = parseFloat(Number(data).toFixed(2))*100+'%'
            $("#cusDriveChainCompare").attr('lay-percent',res)
            element.init();
            element.progress('cusDriveChainCompare', res);
        })
        $.post('cusOrder/findCusOrderChainCompare',function (data){

            var res = parseFloat(Number(data).toFixed(2))*100+'%'
            $("#cusOrderChainCompare").attr('lay-percent',res)
            element.init();
            element.progress('cusOrderChainCompare', res);
        })
        var customer = [];
        var cusOrder = [];
        var cusDrive = [];
        $.ajaxSettings.async = false;
        $.post('customer/findThisYearCustomerIncre',function (data){
            customer = data
        })
        $.post('cusOrder/findThisYearCusOrderIncre',function (data){
            cusOrder = data
        })
        $.post('cusDrive/findThisYearCusDriveIncre',function (data){
            cusDrive = data
        })

        $.ajaxSettings.async = true;
        var chartDom = document.getElementById('dataview');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            title: {
                text: '折线图堆叠'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['新增客户', '新增试驾', '新增订单']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '新增客户',
                    type: 'line',
                    stack: '总量',
                    data: customer
                },
                {
                    name: '新增试驾',
                    type: 'line',
                    stack: '总量',
                    data: cusDrive
                },
                {
                    name: '新增订单',
                    type: 'line',
                    stack: '总量',
                    data: cusOrder
                }
            ]
        };
        option && myChart.setOption(option);
    });
</script>
</body>
</html>
